<template>
  <div class="cart">
    <div class="header">购物车</div>
    <menu>
      <ul>
        <li class="clear" v-for="item of jia">
          <div class="choose" @click="choose_one(item)">
            <span><span v-if="item['choose']">√</span></span>
          </div>
          <a href="">
            <img v-bind:src="item['img_url']" alt=""/>
            <div>
              <h2 v-text="item['category_name']" v-bind:title="item['category_name']"></h2>
              <p v-text="item['eng_name']">>慕斯慕斯</p>
              <span class="price" v-text="item['price']"></span>
            </div>
          </a>
          <div class="button_class">
            <button @click="sub_item(item)">-</button>
            <span v-text="item['number']"></span>
            <button @click="add_item(item)">+</button>
          </div>
        </li>
      </ul>
    </menu>
    <div class="footer clear">
      <div class="choose" @click="choose_all()">
        <span><span v-if="save_all">√</span></span>
      </div>
      <div>
        <span>全选</span>
        <p><span>共计</span><span v-text="total_price"></span></p>
        <button v-bind:class="{'choose_ready':get_it}" v-bind:disabled="!get_it" @click="submit_cart()">GET IT!</button>
      </div>
    </div>
  </div>
</template>
<script>
  var abc = [{
    "id": "10",
    "top": "1",
    "sell_point_title": "\u4fdd\u7559\u7740\u739b\u6b4c\u9152\u72ec\u7279\u7684\u7cbe\u81f4\u82b3\u9999",
    "price": "267",
    "help_self": "1",
    "eng_name": "LE DOME 2013",
    "img_url": "http:\/\/img0.wangjiu.com\/product-image\/20160818\/default\/1471512288790140_ME",
    "category_name": "\u3010\u540d\u5e84\u3011\u4f73\u5f97\u7f8e\u5e84\u56ed\u526f\u724c\u5e72\u7ea2\u8461\u8404\u9152 2013",
    "number": "1",
    "count": null,
    "sell_num": "7575",
    "save": "0",
    "cart": null,
    "choose": true,
    "commit": "67"
  }, {
    "id": "3",
    "top": "0",
    "sell_point_title": "\u5f88\u6709\u9b45\u529b\u7684\u5723\u7231\u7f8e\u9686\u9152",
    "price": "677",
    "help_self": "0",
    "eng_name": "Chateau De La Grange 2012",
    "img_url": "http:\/\/img0.wangjiu.com\/product-image\/20160421\/25474921570320478_ME",
    "category_name": "*\u9601\u5170\u4ed5\u9152\u5e84\u5e72\u7ea2\u8461\u8404\u9152 2012",
    "number": "1",
    "count": null,
    "sell_num": "5",
    "save": "0",
    "cart": null,
    "choose": true,
    "ommit": "40"
  }, {
    "id": "4",
    "top": "1",
    "sell_point_title": "\u4e13\u6ce8\u4e8e\u51fa\u4ea7\u6b63\u724c\u9152\uff0c\u6709\u957f\u671f\u9648\u5e74\u6f5c\u529b",
    "price": "67",
    "help_self": "1",
    "eng_name": "Chateau Charmail 2008",
    "img_url": "http:\/\/img0.wangjiu.com\/product-image\/20160421\/25475482187383461_ME",
    "category_name": "\u3010\u4e2d\u7ea7\u5e84\u3011\u67e5\u6885\u5c14\u5e84\u56ed\u5e72\u7ea2\u8461\u8404\u9152 2008",
    "number": "1",
    "count": null,
    "sell_num": "5",
    "save": "0",
    "cart": null,
    "choose": true,
    "commit": "40"
  }];
  console.log(abc);
  export default {
    name: 'cart',
    data: function () {
      return {
        msg: "cart",
        save_all: true,
        total_price: 0,
        get_it: true,
        jia: [{
          "id": "10",
          "top": "1",
          "sell_point_title": "\u4fdd\u7559\u7740\u739b\u6b4c\u9152\u72ec\u7279\u7684\u7cbe\u81f4\u82b3\u9999",
          "price": "267",
          "help_self": "1",
          "eng_name": "LE DOME 2013",
          "img_url": "http:\/\/img0.wangjiu.com\/product-image\/20160818\/default\/1471512288790140_ME",
          "category_name": "\u3010\u540d\u5e84\u3011\u4f73\u5f97\u7f8e\u5e84\u56ed\u526f\u724c\u5e72\u7ea2\u8461\u8404\u9152 2013",
          "number": "1",
          "count": null,
          "sell_num": "7575",
          "save": "0",
          "cart": null,
          "choose": true,
          "commit": "67"
        }, {
          "id": "3",
          "top": "0",
          "sell_point_title": "\u5f88\u6709\u9b45\u529b\u7684\u5723\u7231\u7f8e\u9686\u9152",
          "price": "677",
          "help_self": "0",
          "eng_name": "Chateau De La Grange 2012",
          "img_url": "http:\/\/img0.wangjiu.com\/product-image\/20160421\/25474921570320478_ME",
          "category_name": "*\u9601\u5170\u4ed5\u9152\u5e84\u5e72\u7ea2\u8461\u8404\u9152 2012",
          "number": "1",
          "count": null,
          "sell_num": "5",
          "save": "0",
          "cart": null,
          "choose": true,
          "ommit": "40"
        }, {
          "id": "4",
          "top": "1",
          "sell_point_title": "\u4e13\u6ce8\u4e8e\u51fa\u4ea7\u6b63\u724c\u9152\uff0c\u6709\u957f\u671f\u9648\u5e74\u6f5c\u529b",
          "price": "67",
          "help_self": "1",
          "eng_name": "Chateau Charmail 2008",
          "img_url": "http:\/\/img0.wangjiu.com\/product-image\/20160421\/25475482187383461_ME",
          "category_name": "\u3010\u4e2d\u7ea7\u5e84\u3011\u67e5\u6885\u5c14\u5e84\u56ed\u5e72\u7ea2\u8461\u8404\u9152 2008",
          "number": "1",
          "count": null,
          "sell_num": "5",
          "save": "0",
          "cart": null,
          "choose": true,
          "commit": "40"
        }]
      }
    },
    created: function () {
      for (var a in this.jia) {
        this.total_price += this.jia[a]["price"] * this.jia[a]["number"];
      }
    },
    methods: {
      choose_one: function (item) {
        item["choose"] = !item["choose"];
        var b = 1;
        if (!item["choose"]) {
          this.total_price = parseInt(this.total_price) - item["price"] * item["number"];
          this.save_all = false;
        } else {
          for (var a in this.jia) {
            b *= this.jia[a]["choose"];
          }
          if (b) {
            this.save_all = true;
          }
          this.total_price = parseInt(this.total_price) + item["price"] * item["number"];
        }
        this.get_it = this.total_price;
      },
      choose_all: function () {
        var b = 1;
        for (var a in this.jia) {
          b *= this.jia[a]["choose"];
          if (!this.jia[a]["choose"]) {
            this.jia[a]["choose"] = true;
            this.save_all = true;
            this.get_it = true;
            this.total_price = parseInt(this.total_price) + this.jia[a]["price"] * this.jia[a]["number"];
          }
        }
        if (b) {
          this.save_all = false;
          for (var c in this.jia) {
            this.jia[c]["choose"] = false;
          }
          this.total_price = 0;
          this.get_it = false;
        }
      },
      sub_item: function (item) {
        if (item["number"] > 1) {
          item["number"]--;
          this.total_price = parseInt(this.total_price) - parseInt(item["price"])
        }
      },
      add_item: function (item) {
        item["number"]++;
        this.total_price = parseInt(this.total_price) + parseInt(item["price"])
      },
      submit_cart: function () {
        console.log(this.get_it)
        console.log("交钱")
      }
    }
  }
</script>
<style scoped lang="scss">
.cart {
  width: 100%;
  height: 100%;
  position: relative;
  //background: lightgreen;
  overflow: hidden;
  padding-top: 1.2rem;
  padding-bottom: 1.5rem;
}

.header {
  top: 0;
  line-height: 1.2rem;
  position: fixed;
  background: white;
  width: 100%;
  text-align: center;
  box-shadow: 0 1px 5px saddlebrown;
  z-index: +2;
  font-size: 0.45rem;
}

menu {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: auto;
  ul {
    background: linear-gradient(#000076,white);
    padding-bottom: 0.7rem;
    li {
      width: 100%;
      background: white;
      border-bottom: 2px dashed orange;
      height: 3rem;
      position: relative;
      a {
        //background: yellow;
        height: 3rem;
        display: block;
        width: 87%;
        float: right;
        padding-top: 0.2rem;
        padding-left: 0.3rem;
        img {
          width: 25%;
          max-width: 2.4rem;
          display: block;
          float: left;
        }
        & > div {
          color: black;
          padding-left: 4%;
          float: left;
          //background: red;
          width: 70%;
          position: relative;
          h2 {
            //background: green;
            height: 1.2em;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 0.45rem;
            font-weight: 400;
            margin-bottom: 0.2rem;
          }
          p {
            font-weight: 100;
            line-height: 0.6rem;
            color: grey;
            height: 1.3rem;
            //background: lightgreen;
          }
          & > span {
            position: absolute;
            top: 2rem;
            color: orangered;
            &:before {
              content: "￥";
              color: red;
            }
          }
        }
      }
      .button_class {
        z-index: +100;
        position: absolute;
        right: 0.4rem;
        bottom: 0.2rem;
        width: 2.4rem;
        button {
          border-radius: 50%;
          border: 1px solid orangered;
          display: block;
          width: 0.8rem;
          height: 0.8rem;
          background: lightyellow;
        }
        button:first-child {
          float: left;
        }
        button:last-child {
          float: right;
        }
        span {
          display: block;
          width: 2.4rem;
          position: absolute;
          z-index: -1;
          top: 0;
          left: 0;
          line-height: 0.8rem;
          text-align: center;
        }
      }
    }
    li:last-child {
      border: none;
      .choose {
        border-bottom: none;
      }
    }
  }
}

.footer {
  position: fixed;
  width: 100%;
  height: 1.5rem;
  bottom: 1.4rem;
  border-top: 1px solid lightgoldenrodyellow;
  background: lightyellow;
  .choose {
    height: 1.5rem;
    border: none;
  }
  div:last-child {
    width: 87%;
    //background: red;
    float: right;
    position: relative;

    & > span {
      padding: 0 0.2rem;
      position: relative;
      text-align: center;
      line-height: 1.5rem;
      font-size: 0.6rem;
      //background: green;
    }
    p {
      //background: red;
      left: 0;
      width: 55%;
      display: inline-block;
      position: relative;
      line-height: 1.5rem;
      span:first-child {
        font-size: 0.5rem;
        padding-right: 5%;
        &:after {
          content: ':';
          padding-left: 0.2rem;
        }

      }
      span:last-child {
        color: orangered;
        font-size: 0.6rem;
        &:before {
          content: "￥";
          color: red;
        }
      }
    }
    button {
      display: block;
      border: none;
      height: 1.5rem;
      width: 30%;
      color: white;
      background: lightgrey;
      position: absolute;
      right: 0;
      top: 0;
      font-size: 0.5rem;
      font-weight: 100;
    }
    .choose_ready {
      background: #bbf166;
      color: yellow;
      font-weight: 800;
    }
  }
}

.clear:after {
  content: "";
  visibility: visible;
  height: 0;
  clear: both;
  display: block;
}

.choose {
  width: 13%;
  float: left;
  position: relative;
  height: 3rem;
  border: 2px solid orange;
  border-width: 0 0 2px 0;
  background: #f4ffef;
  box-sizing: border-box;

  span {
    border: 1px solid orangered;
    border-radius: 50%;
    width: 0.5rem;
    height: 0.5rem;
    display: block;
    position: absolute;
    overflow: hidden;
  }
  & > span {
    top: 50%;
    left: 50%;
    margin: -0.25rem 0 0 -0.25rem;
    text-align: center;
    & > span {
      top: -1px;
      left: -1px;
      content: "√";
      background: yellow;
    }
  }

}


</style>
